<template>
  <div class="page">
    <m-header title="兑换门票" :canback="Boolean(1)"></m-header>
    <div class="body">
      <!-- <div class="tips" >當前積分：{{money||'0.00'}}</div> -->

      <form>
        <ul>
          <li class="list">
            <div class="title">数量</div>
            <input type="number" class="inp" v-model="formData.num" placeholder="请輸入兑换数量" />
          </li>
          <li class="list">
            <div class="title">被兑换币种</div>
            <input
              type="text"
              class="inp"
              v-model="typeName"
              placeholder="被兑换币种"
              @click="changeType"
              readonly
            />
          </li>
          <li class="list">
            <div class="title">交易密码</div>
            <input
              type="password"
              class="inp"
              v-model="formData.pwd"
              placeholder="交易密码"
              maxlength="6"
            />
          </li>
        </ul>
        <div class="sub btn-origin" @click="confirm()">兑换</div>
        <p class="tip" style="font-size:16px;margin-top:10px;">當前门票：{{money||'0.00'}}</p>
        <p class="tip">1{{coinTxt['credit3_text']}} / {{config&&config.credit3_credit1}}门票</p>
        <p class="tip">1{{coinTxt['credit4_text']}} / {{config&&config.credit4_credit1}}门票</p>
      </form>
    </div>
    <m-pwd ref="pwd"></m-pwd>
  </div>
</template>
<script>
import { Owner } from "@/server/server.js";
import { mapGetters } from 'vuex';
import mPwd from '@/components/pwd-alert.vue';
import { Util, Load, Secret } from '@/assets/commonjs/utils.js';
export default {
  components: {
    mPwd
  },
  data() {
    return {
      typePicker: new mui.PopPicker(),
      formData: {
        num: null,
        pwd: null,
        type: null
      },
      typeName: null,
      config: null,
      money: null
    };
  },
  created() {
    this.getConfig();
  },
  mounted() {
    this.initData();
  },
  computed: {
    ...mapGetters(['uid', 'coinTxt'])
  },
  methods: {
    initData() {
      let that = this;
      this.money = this.$route.query.money;
      this.typePicker.setData([
        {
          text: that.coinTxt['credit3_text'],
          value: '3'
        },
        {
          text: that.coinTxt['credit4_text'],
          value: '4'
        },
      ]);
      that.formData.type = 3;
      that.typeName = that.coinTxt['credit3_text'];
    },
    getConfig() {
      Owner.getExchangeConfig().then(res => {
        if (res.code == 1) {
          this.config = res.data;
        } else return mui.toast(res.msg);
      })
    },
    confirm() {
      // console.log(this.formData)
      // return ;
      let msg = Util.isValidate(this.formData);
      if (msg) {
        mui.toast(msg);
        return;
      }
      Owner.exchange(this.formData).then(res => {
        mui.toast(res.msg);
        if (res.code == 1) {
          setTimeout(() => {
            this.$router.go(-1)
          }, 500);
        } else return;
      })

    },
    /**
     * 改变被兑换的币种
     */
    changeType() {
      let that = this;
      this.typePicker.show(function (items) {
        that.formData.type = items[0].value;
        that.typeName = items[0].text;
      });
    },
  }
};
</script>
<style lang="less" scoped>
@import "~link-less";
.page {
  // background: @bg-color;
  .tips {
    padding: 10px 0;
    // background: @bg-color;
    // color: red;
    text-align: right;
  }
  .body {
    padding: 0 30px 30px;
    color: #dbd9ec;

    .list {
      position: relative;
      margin-top: 29px;
      .inp {
        margin-top: 15px;
        margin-bottom: 0;
        height: auto;
        background: transparent;
      }
    }
    .sub {
      margin-top: 130px;
      height: 88px;
      line-height: 88px;
      text-align: center;
      color: @bg-color-white;
      font-size: 32px;
      // background: @btn-primary-color;
      border-radius: 8px;
    }
    .tip {
      font-size: 24px;
      font-weight: 300;
      margin: 10px 0;
      color: #fff;
      text-align: right;
    }
  }
}
input::-webkit-input-placeholder {
  color: #dddddd;
}
</style>
